<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" />
    <script src="//aloe-static.oss-cn-hangzhou.aliyuncs.com/zoom/zoom75.js"></script>
    <link rel="stylesheet" href="css/page-common.css">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="css/upload.css"/>
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html{
            height: 100%;
        }
        body{
            background: skyblue;
        }
        body{
            height: 100%;
            position: relative;
        }

        #getFile{
            position: absolute;
            background-color: blueviolet;
            color: white;
            top:700px;
            right: 20px;
            width: 200px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 20px;
        }

        #img1{
            position: absolute;
            left: 20px;
            top:30px;
            z-index: 999;
            display: none;
        }
        #previewResult{
           display: none;
        }
    </style>
</head>
<body>
<a id="getFile" class="pull-right make">使用</a>
<img src="/css/btn.jpg" alt="" id="img1">
<img id="previewResult" src='<?= $_SESSION['canvas']?>' />

<canvas width="750" height="500" id="cans">
</canvas>
</body>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    var c=document.getElementById("cans");
    var ctx=c.getContext("2d");
    var img=document.getElementById("img1");
    var img1=document.getElementById("previewResult");
    var width = $("#previewResult").width();
    var height =$("#previewResult").height();
    var scale = width / height;
    var width1 = 750;
    var height1 = parseInt(width1 / scale);


    ctx.drawImage(img1,0,0,width,height,0,0,width1,height1);
    ctx.save();
    ctx.drawImage(img,20,30);
    ctx.save();


    /*一键生成跳转*/
    $(".make").bind("touchend",function () {
        var pic = c.toDataURL("image/png");
        var data = {base64:pic};
        $.post('/test/insert',data,function(data){
                    console.log(data);
                },'JSON');
    });




//
//                var pic = c.toDataURL("image/jpeg");
//                console.log(pic);

            //you can upload img base64  :cheers:)
//                console.info('拿到Base64了,传给后台吧？');//src.substr(22)
//                var data = {base64:pic};//后端无需在过滤头
//                $.post('/test/insert',data,function(data){
//                    console.log(data);
//                },'JSON');


//            ctx.drawImage($previewResult,0,0,width,height,0,0,width1,height1);
//            imgcom();
            //可选传base64或者file对象
            //cropInfo.src cropInfo.dfd
//                console.info('拿到Base64了,传给后台吧？');//src.substr(22)
//                var data = {base64:pic};//后端无需在过滤头
//                $.post('/test/insert',data,function(data){
//                    console.log(data);
//                },'JSON');






</script>
</html>